<template>
  <div id="mainLeft">
    <div class="bg-color-black">
        <div style="display: flex;">
          <CityArea24hStats style="flex: 1" />
          <CityAreaAnnualStats style="flex: 1" />
        </div>
        <DispatchCenter v-if="false" />
        <DecorativeDivider />
        <CarUnit v-if="false" />
        <EmergencyStationsOverview />
        <DecorativeDivider />
        <Distribution24hStats />
    </div>
  </div>
</template>
<script>

import DecorativeDivider from '@/components/DecorativeDivider.vue'
import CityArea24hStats from "@/views/main/CityArea24hStats/index.vue";
import CityAreaAnnualStats from "@/views/main/CityAreaAnnualStats/index.vue";
import DispatchCenter from "@/views/main/DispatchCenter.vue";
import CarUnit from "@/views/main/carUnit/index.vue";
import EmergencyStationsOverview from "@/views/main/EmergencyStationsOverview/index.vue";
import Distribution24hStats from "@/views/main/Distribution24hStats/index.vue";

export default {
  components: {
    DecorativeDivider,
    CityArea24hStats,
    CityAreaAnnualStats,
    DispatchCenter,
    CarUnit,
    EmergencyStationsOverview,
    Distribution24hStats
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
$box-width: 650px;
$box-height: 950px;

#mainLeft{
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

}
</style>
